<template>
<!-- 底部的小播放器 -->
<div class="mini-player">
    <!-- 专辑图片 -->
    <div class="icon">
    <div class="img-wraper">
        <img :src="currentSong.al.picUrl"  :class="{pause:!play}"/>
    </div>
    </div>
    <!-- 歌曲信息 -->
    <div class="text">
    <!-- 歌手名字 -->
    <h2 class="name">{{currentSong.name}}</h2>
    <!-- 专辑名字 -->
    <p class="desc">{{currentSong.ar}}</p>
    </div>
    <audio-player
      ref="audioPlayer"
      :audio-list="audioList.map(elm => elm.url)"
      theme-color="rgb(97, 67, 67)"
      class="audioPlayer"
      @playing="playing"
      @pause="pauseMusic"
      @play="playMusic"
      :progress-interval=500
    />
</div>


</template>

<script>
import CicleProgress from './children/cicle-progress.vue'
// 局部引入
// 引入音乐播放组件
import AudioPlayer from '@liripeng/vue-audio-player'
import '@liripeng/vue-audio-player/lib/vue-audio-player.css'
import { getMusicUrl } from '@/api'
export default {
    name:"MiniPlayer",
    components:{
        CicleProgress,
        AudioPlayer
    },
    data() {
        return {
            currentSong:{"id":1807537867,"name":"四季予你","ar":"程响",
            "al":{"name":"四季予你",
            "picUrl":"https://p2.music.126.net/k5r1GC-erKK4WcDmzyrsIw==/109951165648878421.jpg"}},
            play:false,
            currentAudioName: '',
            audioList: [
              // {
              //   name: '音频1',
              //   // 120919402
              //   url: getMusicUrl(1807537867)
              // },
              // {
              //   name: '音频2',
              //   url: 'https://www.0dutv.com/upload/dance/20200316/C719452E3C7834080007662021EA968E.mp3'
              // }
            ],
            currentTime:0

        }
    },
    async mounted(){
      const res = await getMusicUrl(1807537867)
      console.log(res.data[0].url)
      const song = {
        name: '四季予你',
        url:res.data[0].url
      }
      this.audioList.push(song)
    },
    methods: {
        // 点击暂停触发的事件
        pauseMusic(){
            this.play=false;
        },
        // 点击播放的时候触发
        playMusic(){
            this.play=true
        },
        playing(){
          this.currentTime = this.$refs.audioPlayer.currentTime
          this.$emit('getProgress', this.currentTime)
        }
    },


}
</script>

<style scoped>
/* 设置一个旋转动画 */
@keyframes rotate{
    0%{
        transform: rotate(0);

    }
    100%{
        transform: rotate(360deg);
    }

}

.mini-player{
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 1000;
    width: 100%;
    height:90px;
    display: flex;
    align-items: center;
    background: white;

}

.icon{
    flex: 0 0 100px;
    width: 70px;
    height: 70px;
    padding: 0 10px 0 20px;
}

.img-wraper{
    width: 100%;
    height: 100%;
}

.img-wraper img{
    border-radius: 50%;
    width: 100%;
    height: 100%;
    animation: rotate  10s linear  infinite;
}


.img-wraper .pause{
    animation-play-state: paused;
}

.text{
    flex:1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 30px;
}

.text .name{
    margin-bottom: 2px;
    font-size: 14px;
    color: #333;
}

.desc{
    font-size: 12px;
    color: #666;

}

.control{
    flex: 0 0 30px;
    padding: 0 10px;
}

.control i{
    font-size: 40px;
    color: rgb(156, 138, 141);
}

.cicle-progress{
  width: 50px;
  height: 50px;
  /* background: #eee;    */
}

.operators{
    width: 200px;
    height: 40px;
    /* background: #333; */
    display: flex;
    justify-items: center;
}

.operators div{
    flex: 1;
}
.audioPlayer{
    width: 200px;
    height: 90px;
    margin: 5px;
    margin-right:40% ;
}
</style>
